<template>
    <div>
        
        <h2 >会员列表</h2>
            姓名:<input type="text" v-model="info.username">
            手机号:<input type="text"  v-model="info.tel">
            会员等级:<select  v-model="info.levelid">
            <option value="">请选择</option>
             <option  v-for="i in levelList" :value="i.mumberLevelId">{{ i.mumberLevelName }}</option>
        </select>
        <input type="button" class="btn btn-info" value="查询" @click="getNumberList">
         <input type="button" class="btn btn-success" value="重置" @click="rest">
            <table class="table table-bordered">
                <tbody>
                    <tr class="bg-primary">
                        <td>序号</td>
                        <td>姓名</td>
                        <td>手机号</td>
                        <td>证件类型</td>
                        <td>证件号码</td>
                        <td>出生日期</td>
                        <td>性别</td>
                        <td>状态</td>
                        <td>爱好</td>
                        <td>金额</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="i in list" :key="i.numberId">
                        <td>{{ i.numberCode}}</td>
                        <td>{{ i.userName}}</td>
                        <td>{{ i.numberTel.substring(0,3)+"****"+i.numberTel.substring(7)}}</td>
                        <td>{{ i.cardType}}</td>
                        <td>{{ i.card}}</td>
                        <td>{{ moment(i.birthday).format('YYYY-MM-DD') }}</td>
                        <td>{{ i.sex==0 ? "男" :'女'}}</td>
                        <td style="color: bisque;">{{ i.state==true ? "启用" :'禁用'}}</td>
                        <td>{{ i.likes}}</td>
                        <td>{{ i.money.toFixed(2)}}</td>
                        <td> 
                            <input type="button" class="btn btn-danger" value="删除" @click="del(i.numberId)"> 
                            <input type="button" class="btn btn-primary" value="修改" @click="upd(i.numberId)">
                        </td>
                    </tr>
                </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import moment from "moment";
import { ref,reactive,onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

//路由器对象
const router=useRouter();

const route= useRoute();

//获取参数列表
let info:any=reactive({
    username:'',
    tel:'',
    levelid:'',
})

let list:any=ref([]);

//声明一个变量接收等级列表  :any(声明类型)
let levelList:any = ref([]);

const rest=()=>
{
    info.username='',
    info.tel='',
    info.levelid=''
}


onMounted(()=>{
     getLevelList();
    //直接发送到网络请求
    getNumberList();
})
//获取会员等级列表
const getLevelList=()=>{
   axios({
        url:"/api/Mumber/GetMumberList",
        method:"get",
   })
   .then((res)=>{
    //后端返回的数据
        console.log(res);
        levelList.value=res.data;
   })
   .catch((err)=>{
        console.log(err);
   })
};


//修改  路由传参
const upd=(id:any)=>{
    router.push({
        path:'/UpdNumber',
        query:{
            id:id
        },
    });
}

//反填
const fail=(id:any)=>{
     axios({
            url:'http://localhost:5194/api/Mumber/FailNumber',
            method:"delete",
            params:{id:id},
        })
        .then((res)=>{
            console.log(res);
        })
        .catch((err)=>{
        //catch相当于error 失败 catch后端请求失败时的结果  
        console.log(err);
        })
}


//删除 函数传参
const del =(id:any)=>{
    console.log(id);
    //1.友好提示
    var f = confirm("请问您确定删除吗?");
    if(f)
    {
        axios({
            url:'http://localhost:5194/api/Mumber/DelNumber',
            method:"delete",
            params:{id:id},
        })
        .then((res)=>{
            console.log(res);
           
            if(res.data>0)
            {
                alert("删除成功");
                getNumberList();
                return;
            }
            else
            {
                alert("删除失败");
                return;
            }
        })
        .catch((err)=>{
        //catch相当于error 失败 catch后端请求失败时的结果  
        console.log(err);
        })
    }
    //2.发送请求
    //3.删除操作
    //4.更新页面
};



//获取会员列表
const getNumberList=()=>{
    
    axios({
        url:'http://localhost:5194/api/Mumber/ShowNumber',
        method:'get',
        params:info //网络请求传参
    })
    .then((res)=>{
        //then相当于success 成功 res返回成功的结果
        console.log(res);
        list.value=res.data;
    })
    .catch((err)=>{
        //catch相当于error 失败 catch后端请求失败时的结果  
        console.log(err);
    })
}
</script>

<style scoped>
    input[type='button'] {
  margin: 0 5px;
}
</style>